@import "normalize"
@import "vars"
@import "fonts"
@import "libs"

*
	box-sizing: border-box

body
	background: url(../img/bg-desktop.svg) $accent
	background-repeat: no-repeat
	background-size: cover
	font-family: $body-font
	color: $text

h1, h2, h3, h4, h5, h6
	font-family: $headings-font
	font-weight: 700

.main
	max-width: 1440px
	width: 100%
	margin: 0 auto
	display: grid
	grid-template-columns: 1fr
	grid-template-rows: minmax(95px, auto) minmax(600px, auto) minmax(65px, auto) 1fr
	.logo
		margin-top: 50px
	.content
		display: grid
		grid-template-columns: 1fr 1fr
		grid-column-gap: 60px
		margin-top: 50px
	.item1
		display: grid
		align-items: center
		img
			width: 100%
			height: auto
	.item2
		margin-top: 45px
		p
			padding-top: 20px
		button
			width: 200px
			background: #ffffff
			margin-top: 30px
			padding: 20px
			border-radius: 40px
			color: $accent
			font-weight: 700
	.social-btn
		display: flex
		justify-content: flex-end
		font-size: 40px
		a
			color: white
			padding-right: 10px
	footer
		font-size: 10px
		text-align: center
		a
			color: white


//@import "media" // Always at the end

@media only screen and (max-width: 576px)
  .main
    .logo
      width: 100%
      text-align: center
    .content
      grid-template-columns: 1fr
      padding: 0 20px 0 20px
      h1
        text-align: center
        font-size: 2.5em
      button
        width: 100%
        text-align: center
    .social-btn
      margin-top: 20px
      display: grid
      grid-template-columns: repeat(3, 1fr)
      grid-template-rows: auto
      text-align: center
      justify-content: space-around
    footer
      margin-top: 20px
